<script setup lang="ts">
  import { defineProps, ref, watch } from 'vue';
  import { useBooleanStore } from '@/store';
  import CenterTable from '@/views/sorting-matching/list/sort-management-do/components/center-table.vue';

  const props = defineProps<{
    tableData: any;
  }>();
  const columns: any[] = [
    {
      title: '序号',
      dataIndex: 'PAGEHELPER_ROW_ID',
      key: 'PAGEHELPER_ROW_ID',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '条码',
      dataIndex: 'barcode',
    },
    {
      title: '物料名称',
      dataIndex: 'itemName',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    // {
    //   title: 'AO号',
    //   dataIndex: 'aoCode',
    //   sortable: {
    //     sortDirections: ['ascend', 'descend'],
    //   },
    // },
    {
      title: '图号',
      dataIndex: 'itemCode',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '版本号',
      dataIndex: 'version',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '工艺状态号',
      dataIndex: 'procceStnoEcd',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '质量编号',
      dataIndex: 'qualityCode',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '型号',
      dataIndex: 'mProductNumber',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '父型号',
      dataIndex: 'mParentNumber',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    
    
    {
      title: '需求单位',
      dataIndex: 'invShop',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '当前库存',
      dataIndex: 'currentOnHandQty',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '交接数量',
      dataIndex: 'deliveryQty',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: 'ERP出库数量',
      dataIndex: 'erpoutQty',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '非离库占用',
      dataIndex: 'engagedQty',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '离库占用',
      dataIndex: 'takeAwayEngagedQty',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '入库人',
      dataIndex: 'inEmpCode',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '移交单位',
      dataIndex: 'deliveryShop',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '入库日期',
      dataIndex: 'inventoryDate',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '供应商',
      dataIndex: 'srmSupplyId',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '机型',
      dataIndex: 'productCode',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '批次',
      dataIndex: 'batchNo',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '架次',
      dataIndex: 'startLotNo',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '限用机型',
      dataIndex: 'xProductCode',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '限用批次',
      dataIndex: 'xLimitBatchNo',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '限用架次',
      dataIndex: 'xLimitLotNo',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '限用说明',
      dataIndex: 'useLimitInfo',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '实物密级',
      dataIndex: 'securityLevel',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '保密期限',
      dataIndex: 'cpSecretLimitPeriod',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '复试期',
      dataIndex: 'retestDate',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '计划类型',
      dataIndex: 'planType',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '接收备注',
      dataIndex: 'receiveRemark',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '备注',
      dataIndex: 'REMARK',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '交接单id',
      dataIndex: 'wmsDeliveryPlanId',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '台账id',
      dataIndex: 'wmsItemInventoryId',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    
    {
      title: '操作',
      dataIndex: 'action',
      slotName: 'action',
      align: 'center',
      fixed: 'right',
    },
  ];

  const booleanStore = useBooleanStore();
  // 创建一个响应式的本地副本
  const localTableData = ref<any[]>([]);
  // 数据库一共有多少条
  const total = ref<number>(0);
  const pageNum = ref<number>(1);
  const pageSize = ref<number>(10);

  // 监听props.tableData的变化，并更新本地副本
  watch(
    () => props.tableData,
    () => {
      localTableData.value = props.tableData.list;
      total.value = props.tableData.total || 0;
    },
    { immediate: true }
  );

  function showGkLog(record: any) {
    booleanStore.setListTwo(record);
    booleanStore.toggleBool3(4);
  }
  function change(e: any) {
    pageNum.value = e;
  }
  function changeSize(e: any) {
    pageSize.value = e;
  }
  // 监听页面变化
  watch([pageNum, pageSize], () => {
    booleanStore.setPage(pageNum.value, pageSize.value, 29);
  });
</script>

<template>
  <div>
    <a-table
      :stripe="true"
      class="top-table"
      :pagination="false"
      :columns="columns"
      :data="localTableData"
    >
      <template #action="{ record }">
        <a-button type="text" class="font-color" @click="showGkLog(record)"
          >查看所在缓存箱</a-button
        >
      </template>
    </a-table>
    <div class="page-position">
      <a-pagination
        :total="total"
        :current="pageNum"
        :page-size="pageSize"
        show-total
        show-jumper
        show-page-size
        @change="change"
        @update:pageSize="changeSize"
      />
    </div>
  </div>
</template>

<style scoped>
  .top-table {
    white-space: nowrap;
  }
  .page-position {
    margin-top: 20px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
